﻿
(function ($) {
    $.fn.selecter = function (options) {
        var defaults =
                        { isSingle: false, handler: "/handler/handler.ashx", data: "action=getSiteCategory&id=", parentId: "0" }
        var options = $.extend(defaults, options);
        this.each(function () {
            var $this = jQuery(this);
            $.ajax({
                url: defaults.handler,
                dataType: 'json',
                data: defaults.data + defaults.parentId,
                type: 'GET',
                // contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                beforeSend: function () {
                },
                success: function (value) {
                    var html = '<ul>';
                    for (var i = 0; i < value.length; i++) {
                        html += '<li rel="' + value[i]['id'] + '">' + value[i]['cname'] + '</li>';
                    }
                    html += '</ul>';
                    $this.append(html);
                    var $items = $this.find('ul:first').find('li');
                    $items.click(
                        function () {
                            $items.removeClass('current');
                            jQuery(this).addClass('current');
                            method.ajax1(jQuery(this).attr('rel'), $this);
                        }
                    );
                },
                error: function () {
                    alert('error');
                }
            });
        });
        /*methods start*/
        var method = {
            ajax1: function (parentid, $this) {
                $.ajax({
                    url: defaults.handler,
                    dataType: 'json',
                    data: defaults.data + parentid,
                    type: 'GET',
                    //  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                    beforeSend: function () {
                    },
                    success: function (value) {
                        var html = '<ul>';
                        for (var i = 0; i < value.length; i++) {
                            html += '<li rel="' + value[i]['id'] + '">' + value[i]['cname'] + '</li>';
                        }
                        html += '</ul>';
                        $this.find('ul:gt(0)').remove();
                        $this.append(html);
                        var $items = $this.find('ul:gt(0)').find('li');
                        $items.click(
                        function () {
                            $items.removeClass('current');
                            jQuery(this).addClass('current');
                            method.ajax2(jQuery(this).attr('rel'), $this);
                        }
                    );
                    },
                    error: function () {
                        alert('error');
                    }
                });
            },
            ajax2: function (parentid, $this) {
                $.ajax({
                    url: defaults.handler,
                    dataType: 'json',
                    data: defaults.data + parentid,
                    type: 'GET',
                    //  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                    beforeSend: function () {
                    },
                    success: function (value) {
                        var html = '<ul>';
                        for (var i = 0; i < value.length; i++) {
                            html += '<li rel="' + value[i]['id'] + '">' + value[i]['cname'] + '</li>';
                        }
                        html += '</ul>';
                        $this.find('ul:gt(1)').remove();
                        $this.append(html);
                        var $items = $this.find('ul:gt(1)').find('li');
                        var $selectItems = jQuery("#selected li");
                        $items.click(
                        function () {
                            var thisId = jQuery(this).attr('rel');
                            var flag = true;
                            if ($selectItems.length == 0) {
                                jQuery(this).clone().addClass('error').prependTo("#selected");
                                $items.removeClass('current');
                                jQuery(this).addClass('current');
                            }
                            else {
                                if (defaults.isSingle) {
                                    jQuery("#selected li").remove();
                                }
                            }

                            jQuery("#selected li").each(
                                function () {
                                    if (jQuery(this).attr('rel') == thisId) {
                                        flag = false;
                                    }
                                }
                            );
                            if (flag) {
                                jQuery(this).clone().addClass('error').prependTo("#selected");
                                $items.removeClass('current');
                                jQuery(this).addClass('current');
                            }
                            jQuery("#selected li").filter('.init').remove();
                            jQuery("#selected li").click(
                            function () {
                                jQuery(this).remove();

                                if (jQuery("#selected li").length <= 0) {
                                    jQuery("<li  style='color: #D3D3D3;'>Please Select Category</li>").addClass("init").prependTo("#selected");
                                }
                            }
                            );
                            return false;
                        }
                    );
                    },
                    error: function () {
                        alert('error');
                    }
                });
            }
        }
        /*end*/
    };
})(jQuery)